<template>
  <div class="forms">
    <table>
      <tr class="header">
        <th v-for="(item,index) in ['','时间','内容','地址','状态']" :key="index">{{ item }}</th>
      </tr>
      <div ref="con" class="con" id="divContainer" >
        <div class='scroll' :style="{ top,transition: animateFlag?'top 0.5s linear':'auto' }">
          <tr class="box" v-for="(item,$index2) in showdata" :key:any="$index2">
            <td>
              <img v-show="item.type == '智联'" src="../assets/forms_1_icon.png" style="width:18px;height:18px" />
                            <img v-show="item.type == '被动'" src="../assets/forms_2_icon.png" style="width:18px;height:18px" />
                            <img v-show="item.type == '主动'" src="../assets/forms_3_icon.png" style="width:13px;height:18px" />
            </td>
            <td :title="item.time">{{ item.time.substring(11) }}</td>
            <td :title="item.text">{{ item.text }}</td>
            <td :title="item.address">{{ item.address }}</td>
            <td :title="item.state" v-if="['发现','待处置'].includes(item.state)" class="active1" style="color: red">
                            {{ item.state }}
                        </td>
            <td :title="item.state" v-else-if="['立案','派遣','处置','核查','处置中'].includes(item.state)" class="active2" style="color: gold">
                            {{ item.state }}
                        </td>
            <td :title="item.state" v-else-if="['结案','已处置'].includes(item.state)" class="active3" style="color: #00ff36">
                            {{ item.state }}
                        </td>
                        <td :title="item.state" v-else class="active3" style="color: white">
                            {{ item.state }}
                        </td>
          </tr>
          <tr class="box" v-for="(item,$index2) in showdata" :key:any="$index2">
            <td>
              <img v-show="item.type == '智联'" src="../assets/forms_1_icon.png" style="width:18px;height:18px" />
                            <img v-show="item.type == '被动'" src="../assets/forms_2_icon.png" style="width:18px;height:18px" />
                            <img v-show="item.type == '主动'" src="../assets/forms_3_icon.png" style="width:13px;height:18px" />
            </td>
            <td :title="item.time">{{ item.time.substring(11) }}</td>
            <td :title="item.text">{{ item.text }}</td>
            <td :title="item.address">{{ item.address }}</td>
            <td :title="item.state" v-if="['待处置'].includes(item.state)" class="active1" style="color: red">
                            {{ item.state }}
                        </td>
                        <td :title="item.state" v-else-if="['处置中'].includes(item.state)" class="active2" style="color: gold">
                            {{ item.state }}
                        </td>
                        <td :title="item.state" v-else-if="['已处置'].includes(item.state)" class="active3" style="color: #00ff36">
                            {{ item.state }}
                        </td>
                        <td :title="item.state" v-else class="active3" style="color: white">
                            {{ item.state }}
                        </td>
          </tr>
        </div>
      </div>
    </table>
  </div>
</template>

<script lang="ts">
import { ref, reactive, watch } from 'vue'
import { log } from 'util'
export default {
  name: "forms",
  props: {
    fromsData: Array
  },
  data () {
    return {
      activeIndex: 0,
      animateFlag:false
    }
  },
  setup(props) {
    let animate = false
    const fromsData: Array<Object> = reactive(props.fromsData || []) || reactive([])

    let page = ref(1);
    let showdata: any = fromsData.slice(page.value - 1, 100)
    // watch(
    //   () => fromsData,
    //   (age, preAge) => {
    //     console.log(age); // 100
    //     console.log(preAge); // 10
    //   })

    watch(fromsData, (currentValue) => {
      page.value = 1;

      showdata = currentValue.slice(page.value - 1, 100)
    })


    return { fromsData: reactive(fromsData), showdata }
  },
  // scroll(){
  //   console.log(111)
  //     if (fromsData !== undefined && this.fromsData.length > 4) {
  //       const con1: any = this.$refs.con1;
  //       con1.style.marginTop = "-1.083rem";
  //       this.animate = !this.animate;
  //       const that: any = this;
  //       setTimeout(function () {
  //         that.list.push(that.fromsData[0]);
  //         that.list.shift();
  //         con1.style.marginTop = "0rem";
  //         that.animate = !that.animate;
  //       }, 500);
  //     }
  // },
  computed: {
    top() {
      return -this.activeIndex * 36 + 'px'
    },
  },
  methods: {
    scrollTable() {
      if (this.activeIndex < this.showdata.length) {
        this.activeIndex += 1
        this.animateFlag = true
      } else {
        this.activeIndex = 0
        this.animateFlag = false
      }
    },
  },
  mounted() {
    var test = setInterval((_) => {
      this.scrollTable()
    }, 1500)
    var that = this

    document
        .getElementById('divContainer')
        .addEventListener('mouseenter', function (event) {
          clearInterval(test)
        })
    document.getElementById('divContainer').addEventListener('mouseleave', function (event) {
          test = setInterval((_) => {
            that.scrollTable()
          }, 1500)
        })
  },
}
</script>

<style scoped lang="scss">
.con {
  height: 275px;
  overflow: hidden;
}
.scroll {
  position: relative;
  transition: top 0.5s linear;
}
.scrollwu {
  position: relative;
}
.forms {
  width: 100%;
  height: 100%;
  // background: #000000;
  background: transparent;
  table {
    width: 475px;
    height: 100%;
    color: #ffffff;
    height: 15px;
    opacity: 1;
    font-size: 16px;
    padding-left: 20px;
    font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
    font-weight: 400;
    text-align: left;
    tr {
      th {
        line-height: 40px;
        text-align: center;
      }
      th:first-child {
        max-width: 30px;
      }
      th:nth-child(2) {
        min-width: 70px;
        text-align: left;
      }
      th:nth-child(3) {
        min-width: 148px;
        text-align: left;
      }
      th:nth-child(4) {
        min-width: 88px;
        text-align: left;
      }
    }
    .header {
      width: 403px;
      display: flex;
      th {
        flex: 1;
      }
    }
    .box {
      width: 403px;
      display: flex;
      height: 36px;
      line-height: 36px;
      &:nth-child(2n + 1) td:not(:first-child){
        background: #02202d;
      }
      td {
        flex: 1;
        display: block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        &:first-child {
          max-width: 30px;
          text-align: center;
          img {
            width: 18px;
            height: 18px;
            // margin: auto;
            margin-top: 9px;
          }
        }
        &:nth-child(2) {
          flex: 0 0 70px;
        }
        &:nth-child(3) {
          flex: 0 0 1;
        }
        &:nth-child(4) {
          flex: 0 0 90px;
        }
      }
      td[class^='active'] {
        flex: 0 0 55px;
        text-align: center;
      }
    }
  }
}
.active1 {
  text-align: center;
  color: #fa834a;
}
.active2 {
  text-align: center;
  color: #10f7ff;
}
.active3 {
  text-align: center;
  color: #62abfc;
}
.active4 {
  text-align: center;
  color: #ff4273;
}
.active5 {
  text-align: center;
  color: #3e75ff;
}
.active6 {
  // color: #fcd331;
  text-align: center;
  color: #62abfc;
}
.active7 {
  text-align: center;
  color: #00ff9c;
}
.active8 {
  text-align: center;
  color: #fcff10;
}
.active9 {
  text-align: center;
  color: #ff7465;
}
.active10 {
  text-align: center;
  color: #64dcff;
}
#divContainer {
    width: 403px;
}
</style>